<template>
    <div class="app-container">
      
      <!-- :inline="true"表示行内表单 -->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <!-- v-model为什么绑定叫hosname和hoscode的属性，因为后端由@RequestBody修饰的实体类HospitalSetQueryVo正好就是这两个属性，名字必须和
          HospitalSetQueryVo的属性名保持一致，这样才能把前端传的数据绑定到HospitalSetQueryVo实体中 -->
          <el-input v-model="searchObj.username" placeholder="学生姓名"/>
        </el-form-item>
        
        <el-button type="primary" icon="el-icon-search" @click="fetchData(id)">查询</el-button>
  
        
      </el-form>
  
      
  
      <!-- banner列表 -->
      <el-table :data="list" stripe style="width: 100%">
        <!-- <el-table-column type="index" width="50"/> -->
        <el-table-column prop="user.id" label="学号" v-model="id"/>
        <el-table-column prop="user.username" label="学生姓名"/>
        <el-table-column prop="user.sex" label="性别" width="200"/>
        <el-table-column prop="user.email" label="邮箱"/>
        <el-table-column prop="user.phone" label="电话"/>
        <el-table-column label="学生作品" width="280" >
            <template slot-scope="scope">
              <img :src="'http://localhost:8088/'+scope.row.image" width="130" height="80" v-if="scope.row.image!==null && scope.row.image!==''"/>
              <el-button type="danger" plain v-if="scope.row.image===null || scope.row.image===''">未提交</el-button>
            </template>
        </el-table-column>
        <!-- <el-table-column prop="student.id" label="竞赛规范"/> -->
        <!-- 操作栏 -->
        <el-table-column label="操作" width="280" >
          <!-- slot-scope="scope"表示当前行所在的域 -->
          <template slot-scope="scope">
  
            <!-- scope.row表示当前行这个对象  scope.row.id表示当前行的id,但是list里边的每一个对象只有cid，没有id，所以这里要用scope.row.cid
            才能把cid传到后端-->
            <!-- 删除按钮 -->
            
            &nbsp;
            <!-- 路由跳转(编辑按钮)当被点击后，内部会立刻把 to 的值传到 router.push() -->
            <!-- 这里传两个参数，竞赛id和学生id，才能添加到stu_com表中 -->
            
              <el-button v-if="scope.row.image!==null && scope.row.image!=='' && scope.row.status!==1"
               type="primary" size="mini" icon="el-icon-trophy" @click="updateById(scope.row.user.id,scope.row.cid)">颁奖</el-button>
               <el-button v-if="scope.row.status===1"
               type="success" size="mini" icon="el-icon-medal-1"  disabled>已获奖</el-button>
            &nbsp;
  
          </template>
        </el-table-column>
  
  
  
      </el-table>
  
      <!-- 分页 -->
      <!--:current-page是当前页，改成current,前边有冒号，是v-bind，所以冒号里写js表达式  -->
      <!-- @current-change是element-ui的一个事件，切换分页的时候触发 -->
      <el-pagination
        :current-page="current"  
        :page-size="limit"
        :total="total"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next, jumper"
        @current-change="fetchData"
      />
  
    </div>
  </template>
  
  <script>
  //前后端交互：在vue文件中导入hospitalset.js，这些js文件里写了和后端接口交互的函数，调用这些函数，就能实现前后端数据交互
  //记住：前后端交互是靠写的js文件里的函数，而跟router/index.js里配的路由没一点关系，路由只负责前端点哪个按钮跳到哪个组件而已
   
  import stucom from '@/api/stucom' 
  export default {
      data() {
          return {
            current:1, //当前页
            limit:5,   //每页显示记录数
            searchObj:{},//条件封装对象
            list:[],//当前页的数据集合  
            total:0, //总记录数
            
          }
      },
      created(){
        // //获取数据
        // this.fetchData();

        
        const routeParams=this.$route.params;
        if(routeParams && routeParams.id){
            //得到路由参数（id）的值
            const id=routeParams.id;
            //this.competitionId=id;//为了做颁奖功能能拿到对应的竞赛
            this.fetchData(id)
        }
      },
     
      
      //带分页
      methods:{
        fetchData(id){//上边created钩子调fetchData函数如果没有传参数就默认current为1,若传了2，那就是this.curremt=2,1就没用了
          this.current=1;
          this.id=id
          stucom.getPageList1(this.current,this.limit,this.id,this.searchObj).then(response=>{
            //Response：被axios响应拦截器处理后的结果，是Result对象,并不是原始的response，而是原始的response中的data，即Result对象
            //console.log(response);  
            // response.data是Result对象的data属性，这个data是后端自己定义的，它就是Page对象
            this.list=response.data.list;//records是IPage里的
            this.total=response.data.total;
            console.log(response)
            
          })
        },
  
        error(e){
        
        },
        //颁奖
        updateById(studentId,competitionId){
          
            //确定后执行then方法
            stucom.givePrize(studentId,competitionId).then(response=>{
                
            //提示
            this.$message({
              type:'success',
              message:'颁奖成功！'
            })
            //下边这个删掉否则又错误提示，因为我们上边定义的fetchData是有参数的，不能为空
            //this.fetchData()
          })
          
          
        },
      }
  }
  </script>
  
  <style>
  
  </style>